<template>
  <div id="welcome">
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>欢迎</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="15">
      <!-- 左边部分 -->
      <el-col :span="13">
        <!-- 用户信息表格 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户信息</span>
            <el-button style="float: right;" size="mini" plain loading type="primary">用户中心</el-button>
<!--            <el-button-->
<!--              type="primary"-->
<!--              plain-->
<!--              style="float: right;margin-right: 10px;"-->
<!--              size="mini"-->
<!--            >获取源码</el-button>-->
          </div>
          <el-tooltip class="item" effect="dark" content="换头像功能还未实现" placement="top-start">
            <el-avatar
              shape="square"
              :size="90"
              style="float:left;"
              :key="1"
            ></el-avatar>
          </el-tooltip>
          <div class="right" style="float:right;width:520px;">
            <el-table border height="120" :data="adminData">
              <el-table-column prop="rel_name" label="用户姓名" align="center"></el-table-column>
              <el-table-column prop="username" label="用户昵称" align="center"></el-table-column>
              <el-table-column prop="departmentName" label="所属部门" align="center"></el-table-column>
              <el-table-column fixed="right" prop="role" label="用户角色" width="150" align="center">
                <template slot-scope="scope">
                  <el-tag size="small" type="success" v-if="scope.row.role==1">超级管理员</el-tag>
                  <el-tag size="small"  type="info" v-else>普通管理员</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <!-- 功能列表 -->
        <el-row style="margin-top:10px;" :gutter="10">
          <el-card style="height:125px;">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <router-link to="/products">
                  <img
                    alt
                    width="60.8px;"
                    style="margin:0px auto; cursor: pointer;margin-left:20px;"
                  />
                </router-link>
                <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资资料</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <router-link to="/stocks">
                  <img
                    alt
                    width="60.8px;"
                    style="cursor: pointer;margin-left:20px;"
                  />
                </router-link>
                <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资库存</div>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <router-link to="/inStocks">
                  <img
                    alt
                    width="60.8px;"
                    style="cursor: pointer;margin-left:20px;"
                  />
                </router-link>

                <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资入库</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple"></div>
              <router-link to="/outStocks">
                <img
                  alt
                  width="60.8px;"
                  style="cursor: pointer;margin-left:20px;"
                />
              </router-link>
              <div style="font-size:12px;margin-top:5px;margin-left:25px;">物资发放</div>
            </el-col>
          </el-card>
        </el-row>
        <el-card class="box-card" style="margin-top:20px;padding:0px;">
          <!-- 用户登入报表 -->
          <div id="loginReport" style="width: 650px;height:270px;"></div>
        </el-card>
      </el-col>
      <!-- 右边部分 -->
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <el-card style="min-height:650px;">
            <el-carousel height="180px">
              <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
            </el-carousel>
            <aplayer
              style="margin-top:20px;margin-bottom:30px;"
              autoplay
              :music="{
                  title: '给我一个理由忘记',
                  artist: 'A-Lin',
                  src: 'http://music.163.com/song/media/outer/url?id=25640799.mp3',
                  pic: 'http://p2.music.126.net/0POVOSSjqgVoOUGc5haWBQ==/109951163392311918.jpg'
              }"
            ></aplayer>
            <el-divider>其他项目</el-divider>
            <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple"><el-button >通用管理系统</el-button></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"><el-button >社区项目</el-button></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"><el-button >商城项目</el-button></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"><el-button >Githhub</el-button></div></el-col>
            </el-row>

          </el-card>
          <!-- <el-calendar :v-model="new Date()"></el-calendar> -->
        </div>
      </el-col>
    </el-row>

    <!-- <el-card class="box-card">
           <el-calendar v-model="value"></el-calendar>
    </el-card>-->
  </div>
</template>

<script>
  import aplayer from "vue-aplayer";
  export default {
    components: {
      //别忘了引入组件
      aplayer: aplayer
    },
    data(){
      return {
        adminData: []
      }
    },
    methods :{
      /**
       * 显示用户角色
       */
      showRole(row) {
        return row.role == 1 ? "超级管理员" : "普通管理员";
      },
    },
    created() {
      let userInfo = sessionStorage.getItem("username");
      this.axios({
        method: 'post',
        url: 'listAdminByUsername',
        data: userInfo
      }).then((res) => {
        this.adminData = res.data;
      })
    }
  }
</script>

<style scoped>
</style>
